<template>
  <div class="drug-prescription-table" v-if="activeTab == 'pharmacy-fy'">
    <!-- {{ info.groupList }} -->
    <div class="table-title">{{ info.rxName }}</div>

    <div
      v-for="(item, index) in info.groupList"
      :key="index"
    >
      
    
      <div class="table-type">
        <div>{{ item.groupName }}</div>
        <div>{{ item.usageCodeText }}</div>
        <div>{{ item.frequencyCodeText }}</div>
        <div>{{ item.cycle }}{{ item.cycleUnitText }}</div>
        <div>{{ item.ivDripRate }}滴/分钟</div>
      </div>
         <el-table :data="item.detailList" style="width: 100%">
            <el-table-column type="index" width="55"  label="序号">
              <template #default="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column prop="drugName" label="药品" width="350" >
              <template  #default="scope">
                <div v-if="scope.row.drugCategory != '3'">
                    <span style="margin-right: 10px;" >{{ scope.row.drugName }}</span>
                    {{ scope.row.drugDosage }}
                    {{ scope.row.drugDosageUnitText }}*
                    {{ scope.row.minPackQty }}
                    {{ scope.row.minPackUnitText }}/
                    {{ scope.row.packUnitText }}
                </div>
                <div v-else-if="scope.row.drugCategory == '3'">
                   <span style="margin-right: 10px;" >{{ scope.row.drugName }}</span>
                    {{ scope.row.minPackQty }}
                    {{ scope.row.minPackUnitText }}/
                    {{ scope.row.packUnitText }}
                </div>
             
              </template>
              </el-table-column>
            <el-table-column prop="name" label="用量/次" width="300" >
              <template  #default="scope">
                     {{ scope.row.dosage }}
                     {{ scope.row.dosageUnitText }}
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="170" />

            <el-table-column prop="address" label="总量" width="170">
              <template  #default="scope">
                {{ scope.row.totalOutQty }}{{ scope.row.totalOutQtyUnitText }}
              </template>
            </el-table-column>
            <el-table-column prop="dispenseQty" label="已发"  width="170">
              <template  #default="scope">
                {{ scope.row.deliveryQty }}{{ scope.row.totalOutQtyUnitText }}
              </template>
            </el-table-column>
            <el-table-column prop="currentDispenseQty" label="本次发" >
              <template  #default="scope">
                <span style="color:#16ADA4 ;"> {{scope.row.currentDeliveryQty}} {{ scope.row.totalOutQtyUnitText }}</span>
               
              </template>
            </el-table-column>
          </el-table>
    </div>
  </div>
  <div class="drug-prescription-table" v-else>
    <!-- {{ info.groupList }} -->
    <div class="table-title">{{ info.rxName }}<span style="margin-left: 30px;">{{ info.storageName }}</span></div>
    <el-checkbox-group v-model="checkList" @change="handleCheckChange">
        <div v-for="(item, index) in info.groupList"  :key="index">
          <div class="table-type">
            <div v-if="item.dispenseStatus != '3'"><el-checkbox  :disabled="item.dispenseStatus == '3'" :label="item.groupName" /> </div>
            <div>{{ item.usageCodeText }}</div>
            <div>{{ item.frequencyCodeText }}</div>
            <div>{{ item.cycle }}{{ item.cycleUnitText }}</div>
            <div>{{ item.ivDripRate }}滴/分钟</div>
          </div>

          <el-table :data="item.detailList" style="width: 100%">
            <el-table-column type="index" width="55"  label="序号">
              <template #default="scope">
                {{ scope.$index+1 }}
              </template>
            </el-table-column>
            <el-table-column prop="drugName" label="药品" width="270" >
              <template  #default="scope">
                <div v-if="scope.row.drugCategory != '3'">
                    <span style="margin-right: 10px;" >{{ scope.row.drugName }}</span>
                    {{ scope.row.drugDosage }}
                    {{ scope.row.drugDosageUnitText }}*
                    {{ scope.row.minPackQty }}
                    {{ scope.row.minPackUnitText }}/
                    {{ scope.row.packUnitText }}
                </div>
                <div v-else-if="scope.row.drugCategory == '3'">
                   <span style="margin-right: 10px;" >{{ scope.row.drugName }}</span>
                    {{ scope.row.minPackQty }}
                    {{ scope.row.minPackUnitText }}/
                    {{ scope.row.packUnitText }}
                </div>
              </template>
              </el-table-column>
            <el-table-column prop="name" label="用量/次" width="130" >
              <template  #default="scope">
                     {{ scope.row.dosage }}
                     {{ scope.row.dosageUnitText }}
              </template>
            </el-table-column>
            <el-table-column prop="address" label="总量" >
              <template  #default="scope">
                {{ scope.row.totalOutQty }}{{ scope.row.totalOutQtyUnitText }}
              </template>
            </el-table-column>
            <el-table-column prop="dispenseQty" label="已配" >
              <template  #default="scope">
                {{ scope.row.dispenseQty }}{{ scope.row.totalOutQtyUnitText }}
              </template>
            </el-table-column>
            <el-table-column prop="currentDispenseQty" label="本次配" >
              <template  #default="scope">
                <div class="el-input__wrapperColor">
                  <div v-if="item.dispenseStatus == '1'">
                   <el-input v-model="scope.row.currentDispenseQty"   @change="handleCheckAllChange" style="width: 50px;margin-right: 5px;" />{{ scope.row.totalOutQtyUnitText }}
                  </div>
                   <!-- <span v-model="scope.row.currentDispenseQty"   @change="handleCheckAllChange" style="width: 50px;margin-right: 5px;" >{{ scope.row.totalOutQtyUnitText }} -->
                    <span v-else  style="width: 50px;margin-right: 5px;">
                      <span style="color:#16ADA4 ;margin-right: 5px;">
                        {{scope.row.currentDispenseQty}}
                      </span>{{ scope.row.totalOutQtyUnitText }}
                    </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" width="170" />
          </el-table>
        </div>
    </el-checkbox-group>

  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  list?: Array<{
    id?: string | number;
    name: string;
    usage: string;
    remark: string;
    total: string;
    sent: string;
    current: string;
  }>;
  info: any;
  activeTab: string;
}>();



const info = props.info;

if(info.rxType == '2'){
  info.groupList.forEach((item: any) => {
    item.detailList.forEach((items: any) => {
      items.currentDispenseQty = items.totalOutQty - items.dispenseQty
    });
  });
}


const checkList = ref<any>([]);
const infos = ref({
   "rxId": info.rxId,
    "groupList": [
    ]
});

const  handleCheckAllChange = () => { 
  if (checkList.value) {
    handleCheckChange(checkList.value);
  } else {
    
  }
};  
const emit = defineEmits(['closeDrawer']);
const handleCheckChange = (val:any) => { 
  let groupList:any = []

  for (let index = 0; index < val.length; index++) {
    let name = val[index];
    info.groupList.forEach((item: any) => {
      if (item.groupName == name) {
        let detailList:any = []
        item.detailList.forEach((items: any) => {
          detailList.push({
            "drugId": items.drugId,
            "currentDispenseQty": items.currentDispenseQty
          })
        });
        groupList.push({
          groupName: item.groupName,
          detailList: detailList
        })
      }
    });
  }
  infos.value.groupList = groupList;
  //console.log(infos.value,'输液');
  emit('closeDrawer',infos.value);
};

for (let index = 0; index < info.groupList.length; index++) {
  let item:any = info.groupList[index];
  if(item.dispenseStatus == '1'){
    
    checkList.value.push(item.groupName)
  }
  handleCheckAllChange()
}
 
</script>
<style>
.el-input__wrapperColor  .el-input__wrapper{
  border: 1px solid #16ADA4;
}
.el-input__wrapperColor  .el-input__inner{
  color:#16ADA4
}
</style>
<style scoped>

.drug-prescription-table {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px 0 #e9e9e9;
  margin: 0;
  overflow: hidden;
}
.table-title {
  font-size: 20px;
  font-weight: 500;
  color: #222;
  background: #f8f8f8;
  height: 52px;
  line-height: 52px;
  font-size: 14px;
  background: #f8f8f8;
  border-radius: 0px 0px 0px 0px;
  padding: 0px 17px;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  color: #222;
}
th,
td {
  padding: 12px 8px;
  text-align: left;
  background: #fff;
}
th {
  color: #bdbdbd;
  font-weight: 400;
  font-size: 15px;
  background: #fff;
}
tr:not(:last-child) td {
  border-bottom: 1px solid #f0f0f0;
}
thead th {
  border-bottom: 1px solid #f0f0f0;
  border-top: 1px solid #f0f0f0;
}
td.highlight,
th.highlight {
  color: #000000;
  font-weight: 500;
}
tr:last-child td {
  border-bottom: none;
}
.highlight_1 {
  font-size: 13px;
  color: #16ada4;
}
.table-type {
  display: flex;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: #666;
  padding-left: 14px;
}
.table-type > div {
  margin-right: 30px;
}
</style>
